<template>
<div class="box">

  <div>
    <nav class="cg">
      基础分析/归因分析
    </nav>
  </div>

  <div class="container">
    <div class="area1">
      <div class="cs">
        <h2>选择事件</h2>
      </div>
      <div class="ois">
        <label for="ois1">目标转化事件&nbsp; &nbsp;</label>
        <select id="ois1" v-model="selectedois">
        <option value="register">注册</option>
        <option value="browse products">浏览商品</option>
        </select>
      </div>
      <div class="tabs">
        <label for="tabs1">待归因事件&nbsp; &nbsp;</label>
        <select id="tabs1" v-model="selectedtbas">
        <option value="browse w">浏览网页</option>
        </select>
      </div>
      <div class="amaw">
        <label for="am">分析方法&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </label>
          <select id="am" v-model="selectedtam">
            <option value="first tap attribution">首次点触归因</option>
            <option value="last tap attribution">末次点触归因</option>
            </select>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label for="tbaaw"> 归因窗口期 </label>
            <select id="tbaaw" v-model="selectedtbaaw">
            <option value="number1">1 </option>
            <option value="number2">2 </option>
          </select>
        <label for="date"> 天</label>
        <div class="flex-container">
          <button class="rectangle-button">查询</button>
        </div>
      </div>
    </div>
    <div class="area2">
      <div class="demo-date-picker">
        <div class="block">
          <el-date-picker
          v-model="value"
          type="daterange"
          start-placeholder="Start date"
          end-placeholder="End date"
          :default-time="defaultTime"
          />
        </div>   
      </div>
      <el-table :data="tableData" style="width: 100%;"
          :header-cell-style="{
            background: '#b1b3b8',
            color: '#000000'
          }"
      >
          <el-table-column prop="attributedthing" label="待归因事件" width="300" />
          <el-table-column prop="clicksnumber" label="点击次数" width="350" />
          <el-table-column prop="effectiveclick" label="有效转化点击" width="350"/>
          <el-table-column prop="objectnumber" label="目标事件次数" width="400"/>
          <el-table-column prop="contributiondegree" label="贡献度" />
        </el-table>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref } from 'vue';
const selectedois = ref('register');
const selectedtbas = ref('browse w');
const selectedtam = ref('first tap attribution');
const selectedtbaaw = ref('number1');
const value = ref('')
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
const tableData = [
  {
    attributedthing: '注册',
    clicksnumber: '12293',
    effectiveclick: '1123',
    objectnumber: '4524',
    contributiondegree: '78%'
  },
  {
    attributedthing: '加入购物车',
    clicksnumber: '12293',
    effectiveclick: '1123',
    objectnumber: '4524',
    contributiondegree: '78%'
  },
  {
    attributedthing: '点击广告',
    clicksnumber: '12293',
    effectiveclick: '1123',
    objectnumber: '4524',
    contributiondegree: '78%'
  },
  {
    attributedthing: '点击推荐商品',
    clicksnumber: '12293',
    effectiveclick: '1123',
    objectnumber: '4524',
    contributiondegree: '78%'
  },
]
</script>

<style>
.box{
  background-color:rgb(249, 249, 246);
}
.cg{
  font-size: larger;
  margin: 10px 30px 40px;
}
.cs{
  font-size: small;
  margin: 10px 50px 30px;
}
.ois{
  margin: 10px 60px 30px;
}
#ois1{
  width:200px;
  height: 25px;
}
.tabs{
  margin: 10px 75px 30px;
}
#tabs1{
  width:200px;
  height: 25px;
}
.amaw{
  font-weight: 1000;
  margin: 10px 50px 30px;
}
#am{
  width:200px;
  height: 25px;
}
#tbaaw{
  width: 40px;
  height: 25px;
}
.flex-container {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}
.rectangle-button {
  border: 1px solid black;
  background-color: #cce0f6;
  padding: 5px 25px;
  border-radius: 5px;
  color: blue;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.product {
  display: flex;
  align-items: center;
  font-weight: bold;
}

</style>
